import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import {
    Layout, Menu, Breadcrumb, Icon,
} from 'antd';

import '../App.css';
import '../style/public.css';
import LoginPage from './page/login'
import RouterList from './router/index'
import Option1 from '../pages/page/option'

const {
    Header, Content, Footer, Sider,
} = Layout;
const Login = () => {
    return <LoginPage />
};
// 图表
const Index = () => {return <Option1 />}

const Tacos = ({ routes }) => (
    <Layout style={{paddingTop: 24}}>
        <Sider style={{ minHeight: 390}}>
            <span className="slider" >
                {slideMenu(routes)}
            </span>
        </Sider>
        <Layout>
            <Content style={{padding: 24, background: '#fff', minHeight: 290}}>
                <div className="content11">
                    {renderRoutes(routes)}
                </div>
            </Content>
        </Layout>

    </Layout>
);

const slideMenu = (routes) => Array.isArray(routes) && routes.map(item => (
        <div key={item.path} className='nav-link'><Icon type={item.icon}/>
            <OldSchoolMenuLink to={item.path} label={item.name} exact={item.exact}></OldSchoolMenuLink>
            {Array.isArray(item.routes) && item.routes.length > 0 && (
                <div className='m_l_16'>
                    {slideMenu(item.routes)}
                </div>
            )}
        </div>
    )
);


const renderRoutes = (routes) => {return (RouterList.routes.map((route, i) => <RouteWithSubRoutes key={i} {...route} />))};

const Bus = ({routes}) => {
    return (

                <div>
                    <h3>Bus constructor</h3>
                    {renderRoutes(routes)}
                </div>



    )
};
const Bus2 = () => <h3>Bus2</h3>;
const Bus3= () => <h3>Bus3</h3>;
const Cart = () => <h3>Cart</h3>;


const routes = [
    {
        path: "/login",
        name: 'Login',
        component: Login
    },
    {
        path: "/tacos",
        name: 'Tacos',
        component: Tacos,
        routes: [
            {
                path: "/tacos/bus",
                name: "/tacos/bus",
                component: Bus,
                icon:'folder-open',
                routes: [
                    {
                        path: "/tacos/bus/bus2",
                        name: "/tacos/bus/bus2",
                        component: Bus2
                    },
                    {
                        path: "/tacos/bus/bus3",
                        name: "/tacos/bus/bus3",
                        component: Bus3
                    }
                ]
            },
            {
                path: "/tacos/cart",
                name: "/tacos/Cart",
                icon:'calendar',
                component: Cart
            },
            {
                path: '/tacos/option1',
                name: 'index',
                title: 'Option 1',
                hasSub:0,
                subMenu:[],
                icon:'pie-chart',
                component: Index
            },
            {
                path: '/tacos/option2',
                name: 'treasure',
                title: 'Option 2',
                hasSub:0,
                subMenu:[],
                icon:'desktop',
                component: Bus

            },
            {
                path: '/tacos/user',
                name: 'redPacket',
                title: 'User',
                hasSub:1,
                routes:[
                    {path:'/tacos/user/user1',name:'Tom',component: Bus},
                    {path:'/tacos/user/user2',name:'Bill',component: Bus},
                    {path:'/tacos/user/user3',name:'Alex',component: Bus},
                ],
                icon:'user',
                component: Bus

            },
            {
                path: '/tacos/team',
                name: 'cardsBag',
                title: 'Team',
                hasSub:1,
                routes:[
                    {path:'/tacos/team/team1',name:'Team1',component: Bus},
                    {path:'/tacos/team/team2',name:'Team2',component: Bus},
                ],
                icon:'team',
                component: Bus

            },
            {
                path: '/tacos/file',
                name: 'goldenPig',
                title: 'File',
                hasSub:0,
                routes:[],
                icon:'file',
                component: Bus
            },
        ]
    }
];

const OldSchoolMenuLink = ({ label, to, exact }) => (
    <Route
        path={to}
        exact={exact}
        children={({ match }) => {
            return (
                <React.Fragment >
                    <Link to={to} className={match ? "active" : ""}>{label}</Link>
                </React.Fragment>
            )
        }}
    />
);


// wrap <Route> and use this everywhere instead, then when
// sub routes are added to any route it'll work
const RouteWithSubRoutes = route => (
    <Route
        path={route.path}
        render={props =>{
            console.log(props)
            console.log(route)
            return (
                // pass the sub-routes down to keep nesting
                <route.component {...props} routes={route.routes} />
            )
        }}
    />
);

const RouteConfigExample = () => (
    <Router>
        <div>
            <div className="top_header">
                <span className='float_l m_l_16'>小蜜蜂财务管理系统</span>
                <Icon  className='m_r_16' type="github" />
                <span className='m_r_16'>
                    <Link to="/tacos">Tacos</Link>
                </span>
                <span className='m_r_16'>
                    <Link to="/login">login</Link>
                </span>
            </div>
            {routes.map((route, i) => <RouteWithSubRoutes key={i} {...route} />)}
        </div>
    </Router>
);

export default RouteConfigExample;
